﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Weather_Prediction.WebForm1"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="~/CssFiles/Application.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">

        var map;
        var geocoder;
        var initialLocation;
        function initializeMap() {
            //get the current location of the user
            navigator.geolocation.getCurrentPosition(function (position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(initialLocation);
            });

            var myOptions =
            {
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
        }

        function findLocation() {
            geocoder = new google.maps.Geocoder();
            initializeMap();

            var address = document.getElementById("tbLocation").value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                    });
                }
                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

    </script>
    <title>Weather forecast</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Title" class="divTitle">
        <asp:Label ID="lbTitle" class="lbtitle" Style="margin-left: 500px; margin-top: 200px;"
            runat="server" Text="Wellcome to weather underground"></asp:Label>
    </div>
    <div id="SearchLocation" class="searchLocation">
        <asp:Label ID="lbLocation" class="lblocation" runat="server" Text="Enter a location"></asp:Label>
        <asp:TextBox ID="tbLocation" class="tblocation" ToolTip="please enter your location in English"
            runat="server"></asp:TextBox>
        <asp:Button ID="btSearch" class="btsearch" runat="server" OnClick="ClickSearch" Text="Search" />
    </div>
    <table style="width: 100%;">
        <tr>
            <td style="width: 60%; height: auto;">
                <asp:Table ID="PlaceHolderForUserControl" runat="server">
                </asp:Table>
            </td>
            <td style="width: 40%;">
                <div id="map" style="width: 100%; height: 350px; border-width: 0.1em; border-style: solid;
                    border-color: #4BB9DC">
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
